<template>
  <div class="container max-w-screen-md mx-auto p-3">
    <n-card>
      <h2 class="text-center font-mono">目前共计{{ pagination.itemCount }}篇文章</h2>
      <n-divider></n-divider>
      <n-timeline>
        <n-timeline-item type="success" v-for="(item,index) in computedList" :key="index">
          <n-collapse :default-expanded-names="['1']">
            <n-collapse-item name="1" class="w-full">
              <template #header>
                <h3 class="">
                  <n-text type="success">{{ item.key }}</n-text>
                </h3>
              </template>
              <div v-for="(it,idx ) in item.value" :key="idx" class="truncate p-1">
                <n-button @click="handlePost(it.id)" quaternary>
                  <span class="font-bold">{{ dayjs(it.createdAt).format('MM-DD') }}</span>
                  :
                  <span class="pl-3"> {{ it.title }}</span>
                </n-button>
              </div>
              <n-divider></n-divider>
            </n-collapse-item>
          </n-collapse>
        </n-timeline-item>
      </n-timeline>
      <n-button ref="targetRef" v-if="list.length<pagination.itemCount" @click="handleMore" block>加载更多</n-button>
      <n-button v-else text block>已经到底</n-button>
    </n-card>
  </div>
</template>

<script setup lang="ts">
import api from "@/api";
import {computed, onMounted, reactive, ref, watch} from "vue";
import dayjs from "@/utils/dayjs";
import router from "@/router";
import {useElementVisibility} from "@vueuse/core";


onMounted(() => {
  getPostList()
})
const targetRef = ref(null)
const targetIsVisible = useElementVisibility(targetRef)

watch(targetIsVisible, () => {
  if (targetIsVisible.value) {
    handleMore()
  }
})
const list = ref<IPost[]>([])
const pagination = reactive(
    {
      pageSize: 10,
      pageNo: 1,
      itemCount: 0,
    })
const orderParams = ref({
  createdAt: '降序',
  updatedAt: '',
  comments: '',
  views: ''
})
const andParams = ref({
  visibility: 'public',
  categoryName: ''
})
const computedList = computed(() => {
  let res: any = []
  list.value.forEach((item: IPost) => {
    let key = dayjs(item.createdAt).format('YYYY年M月')
    if (res.some((r: any) => r.key === key)) {
      res.forEach((r: any) => {
        if (r.key === key) {
          r.value.push(item)
        }
      })
    } else {
      let r: any = []
      r.push(item)
      res.push({
        key: key,
        value: r,
      })
    }
  })
  return res
})

const getPostList = () => {
  window.$loadingBar.start()
  api.post.queryList({
    pageNo: pagination.pageNo,
    pageSize: pagination.pageSize,
    andParams: JSON.stringify(andParams.value),
    orderParams: JSON.stringify(orderParams.value),
  }).then(res => {
    res.data.data.records.forEach((item: any) => {
      item.tags = item.tags ? JSON.parse(item.tags) : []
    })
    list.value = list.value.concat(res.data.data.records)
    pagination.itemCount = res.data.data.total
  }).finally(() => {
    window.$loadingBar.finish()
  })
}
const handleMore = () => {
  pagination.pageNo++
  getPostList()
}
const handlePost = (id: string) => {
  router.push({
    path: `/pc/post/p/${id}`
  })
}
</script>

<style scoped>

</style>